<template>
	<view class="e-m-b-20" v-if="groupListTotal">
		<view class="spell-group-header e-flex e-flex-between">
			<text>{{groupListTotal}}{{$t('spellgroup.ptrs')}}</text>
			<view class="" @tap="handleShowAllGroup" v-if="groupListTotal > 3">
				<text class="c-666 e-font-24">{{$t('spellgroup.lookall')}}</text>
			</view>
		</view>
		<view class="spell-line"></view>
		<view v-for="(items, indexs) in speList">
			<spellItem :key="indexs" :item="items" @join="joinGroup"></spellItem>
			<view class="spell-line" v-if="indexs !== speList.length - 1"></view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import spellItem from './spellitem.vue'
	const props = defineProps<{
		groupListTotal:number,
		speList:Array<any>,
	}>()
	const emit = defineEmits(['handleShowAllGroup','joinGroup'])
	const handleShowAllGroup = () => {
		emit('handleShowAllGroup')
	}
	const joinGroup = (joinGroup:string) => {
		emit('joinGroup', joinGroup)
	}
</script>

<style lang="scss" scoped>
	.spell-group-header {
		height: 100rpx;
		border-radius: 10rpx 10rpx 0px 0px;
		padding: 0 20rpx;
		background: #FFFFFF;
	}
	.spell-line {
		border-bottom: 1rpx solid #DFE3E6;
	}
</style>
